import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Form, Input } from 'antd'
import { Line, Cell, Split } from '@components/ApprovePre/Approve'
import SelectSecretary from '../SelectSecretary'

const { Item } = Form

export default class SecretaryInput extends Component {
  state = {
    secretarySelectorVisible: false,
    secretaryid: ''
  }

  render () {
    const { id } = this.props.caseDetail
    const { secretarySelectorVisible, secretaryid } = this.state
    const setSecretary = (o) => {
      const { employee, employeeid } = o
      this.props.formRef.current.setFieldsValue({
        secretary: employee,
        vars: {
          processer_recommend: employee,
          processerid_recommend: employeeid
        }
      })
      this.setState({
        secretaryid: employeeid
      })
    }
    return (
      <div>
        <SelectSecretary caseid={id} visible={secretarySelectorVisible} value={secretaryid} hide={() => this.setState({ secretarySelectorVisible: false })} changeSecretary={o => setSecretary(o)} />
        <Line>
          <Cell>
            <Item label='操作者'>
              <span>{this.props.userInfo.realname}</span>
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item name='secretary' label='推荐秘书'>
              <Input placeholder='请选择秘书' readOnly onClick={() => this.setState({ secretarySelectorVisible: true })} />
            </Item>
          </Cell>
        </Line>
      </div>
    )
  }
}

SecretaryInput.proptypes = {
  caseDetail: PropTypes.object,
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  formRef: PropTypes.object
}

SecretaryInput.defaultProps = {
  caseDetail: {},
  userInfo: {},
  instance: {},
  formRef: {}
}
